<template>
  <!-- <MoveCar></MoveCar> -->
  <!-- 如果路由里面 useFrame w为true表示全屏 为fasle 表示不是全屏-->
  <div v-if="$route.meta.useFrame != undefined && $route.meta.useFrame == true">
    <van-tabbar v-model="active">
      <van-tabbar-item icon="home-o">首页</van-tabbar-item>
      <van-tabbar-item icon="user-circle-o">车友圈</van-tabbar-item>
      <van-tabbar-item icon="discount">选车</van-tabbar-item>
      <van-tabbar-item icon="logistics">二手车</van-tabbar-item>
      <van-tabbar-item icon="friends-o" url='https://chat.deepseek.com/'>服务</van-tabbar-item>

    </van-tabbar>
    <!-- <RouterView>路由出口 -->
    <RouterView></RouterView>
  </div>
  <!-- 不是全屏> -->
  <div v-if="$route.meta.useFrame == undefined || $route.meta.useFrame == false">
    <el-container>
        <el-header>
            <el-row class="row-bg" justify="space-between">
                <el-col :span="6">
                    图标样式
                </el-col>
                <el-col :span="15">
                    <div style="line-height: 50px; font-size: 20px; text-align: center;">
                        AI智选汽车服务后台管理系统
                    </div>

                </el-col>
                <el-col :span="3">
                    <el-dropdown>

                        <span class="el-dropdown-link">
                            <img src="./assets/logo.png" alt="" width="30" height="30">
                            萧炎
                            <el-icon class="el-icon--right">
                                <arrow-down />
                            </el-icon>
                        </span>
                        <template #dropdown>
                            <el-dropdown-menu>
                                <el-dropdown-item>个人中心</el-dropdown-item>
                                <el-dropdown-item>账户与安全</el-dropdown-item>
                                <el-dropdown-item>关于我们</el-dropdown-item>
                                <el-dropdown-item disabled>友谊合作</el-dropdown-item>
                                <el-dropdown-item divided>退出登录</el-dropdown-item>
                            </el-dropdown-menu>
                        </template>
                    </el-dropdown>
                </el-col>
            </el-row>
        </el-header>
        <el-container>
            <el-aside width="200px">
                <Menu></Menu>
            </el-aside>
            <el-main>
                <router-view></router-view>
            </el-main>
        </el-container>
    </el-container>
  </div>
  

</template>

<script setup>
import { ref } from 'vue'
const active = ref(0)
import MoveCar from './views/MoveCar.vue'
import Menu from './components/Menu.vue'

</script>

<style scoped>
* {
    margin: 0;
    padding: 0;
}
.el-header {
    width: 100%;
    height: 50px;
    background-color: #6db5ff;
    ;
}

.el-dropdown {
    line-height: 50px;
    font-size: 16px;
    margin-right: 13px;
    float: right;

    img {
        position: absolute;
        right: 60px;
        top: 10px;
    }
}
.el-main{
  margin: 0;
  padding: 0;
}
</style>